<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三个圆点击效果学习</title>
    <link rel="stylesheet" href="./css/Circle.css"/>
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#use11").mouseenter(function(){
                $("#use1").fadeToggle();
            });
        });
        $(document).ready(function(){
            $("#use22").mouseenter(function(){
                $("#use2").fadeToggle();
            });
        });
        $(document).ready(function(){
            $("#use33").mouseenter(function(){
                $("#use3").fadeToggle();
            });
        });

        $(document).ready(function(){
            $("#use11").mouseleave(function(){
                $("#use1").hide();
            });
        });
        $(document).ready(function(){
            $("#use22").mouseleave(function(){
                $("#use2").hide();
            });
        });
        $(document).ready(function(){
            $("#use33").mouseleave(function(){
                $("#use3").hide();
            });
        });
    </script>
</head>
<body>


<div class="container img">
    <div class="row" style="margin-top: 200px;">
        <div class="a a1" id="use11">
            <div class="aa text-center" id="use1">
                <h3 style="color: #ffffff;margin-top: 40px;">USE WHAT YOU HAVE</h3>
                <p style="color: #ffffff;">
                    <i>by Angela Duncan</i>
                    <br/>
                    <a style="color: #ffffff;" href="#">VIEW ON DRIBBBLE</a>
                </p>

            </div>
        </div>

        <div class="a a2" id="use22">
            <div class="aa text-center" id="use2">
                <h3 style="color: #ffffff;">COMMON CAUSES OF STAINS</h3>
                <p style="color: #ffffff;">
                    <i>by Antonio F. Mondragon </i>
                    <br/>
                    <a style="color: #ffffff;" href="#">VIEW ON DRIBBBLE</a>
                </p>

            </div>
        </div>

        <div class="a a3" id="use33">
            <div class="aa text-center" id="use3">
                <h3 style="color: #ffffff;margin-top: 50px;">PINK LIGHTNING</h3>
                <p style="color: #ffffff;">
                    <i>by Charlie Wagers </i>
                    <br/>
                    <a style="color: #ffffff;" href="#">VIEW ON DRIBBBLE</a>
                </p>

            </div>
        </div>

    </div>

</div>

<div>
    <input type="checkbox" data-role="flipswitch" data-on-text='打开' data-off-text='关闭'>
</div>


</body>
</html>